layui.define(["element", "jquery", 'layer'], function (exports) {
    var element = layui.element,
        $ = layui.$,
        layer = layui.layer;
    
    var mMenu = {
        render: function() {
            $.getJSON(setter.menuUrl, function(resp) {
                resp = resp || []
                if (setter.multiModule) {
                    mMenu.renderMultiModule(resp);
                } else {
                    mMenu.renderSingleModule(resp);
                }
                try {
                    I18n.render()
                } catch(e){}
                mMenu.listen(resp);
            })
        },
        renderSingleModule: function(menuList) {
            menuList = menuList || [];
            if (menuList.length > 0) {
                mMenu.renderSide(menuList);
            }
        },
        renderMultiModule: function(menuList) {
            menuList = menuList || [];
            if (menuList.length > 0) {
                var $headerContainer = $('.layui-layout-left')
                $.each(menuList, function(i, o) {
                    $headerContainer.append([
                        '<li class="layui-nav-item" multi-menu-index="' + i + '">',
                        '<a href="javascript:void(0)">',
                        '<i class="menu-icon '+ (o.icon || 'fa fa-home') + '"></i>',
                        '<span locale-html="menu.' + o.i18n + '">' + (o.name || o.title) + '</span>',
                        '</a>',
                        '</li>'
                    ].join(''));
                });
                element.init();
            }
        },
        renderSide: function(children) {
            var html = '';
            $.each(children, function(i, o) {
                html += ['<li class="layui-nav-item ' + (o.isOpen? 'layui-nav-itemed': '') + '">',
                        '<a href="javascript:void(0)"' + mMenu.layHrefAttr(o),
                        ' locale-lay-tips="menu.tips.' + o.i18n + '" lay-tips="' + (o.name || o.title) + '"',
                        ' lay-direction="2">',
                        '<i class="menu-icon ' + o.icon + '"></i>',
                        '<cite locale-html="menu.' + o.i18n + '">' + (o.name || o.title) + '</cite>', 
                        ((o.children && o.children.length > 0)? '<span class="layui-nav-more"></span>': ''),
                        '</a>',
                        ((o.children && o.children.length > 0)? mMenu.renderChild(o.children): ''),
                        '</li>'
                    ].join('');
            });
            $('.layui-side .layui-nav-tree').empty().append(html);
            element.init();
        },
        renderChild: function(children) {
            var child = '';
            children = children || [];
            if (children.length > 0) {
                child += '<dl class="layui-nav-child">';
                $.each(children, function(i, o) {
                    child += ['<dd>',
                            '<a href="javascript:void(0)"' + mMenu.layHrefAttr(o) + '>',
                            '<i class="menu-icon ' + o.icon + '"></i>',
                            '<cite locale-html="menu.' + o.i18n + '">' + (o.name || o.title) + '</cite>',
                            ((o.children && o.children.length > 0)? '<span class="layui-nav-more"></span>': ''),
                            '</a>',
                            ((o.children && o.children.length > 0)? mMenu.renderChild(o.children): ''),
                            '</dd>'
                        ].join('');
                });
                child += '</dl>';
            }
            return child;
        },
        layHrefAttr: function(o) {
            var ret = ''
            if (!o.children && (o.href || o.url)) {
                ret = ' lay-href="' + (o.href || o.url) + '"';
            }
            return ret;
        },
        listen: function(menuList) {
            $('body').on('click', '[multi-menu-index]', function() {
                var othis = $(this),
                    menuIndex = parseInt(othis.attr('multi-menu-index') || 0)
                if (menuList[menuIndex] && menuList[menuIndex].children) {
                    mMenu.renderSide(menuList[menuIndex].children);
                }
            })
            $('[multi-menu-index="0"]').addClass('layui-this').trigger('click');
        },
        events: {
            // TODO 收缩时鼠标移上去显示子菜单（有bug，暂时不开放）
            toggleSideFlexible: function() {
                var $sideNav = $('.layui-side .layui-nav-tree')
                if ($(setter.containerCls).hasClass('layui-side-shrink')) {
                    $sideNav.find('.layui-nav-item, .layui-nav-child dd').hover(function() {
                        var top = $(this).offset().top + 5
                        var left = $(this).offset().left + 62
                        if (!$(this).is(".layui-nav-item")) {
                            left += 70
                        }
                        var $child = $(this).children(".layui-nav-child")
                            $child.addClass("layui-nav-hover")
                            $child.offset({left:left,top:top})
                    }, function() {
                        $(this).children(".layui-nav-child").removeClass("layui-nav-hover")
                        $(this).children(".layui-nav-child").css({left: '0px'})
                        $(this).children(".layui-nav-child").css({top: '0px'})
                    })
                } else {
                    $sideNav.find('.layui-nav-item, .layui-nav-child dd')
                        .off('mouseenter')
                        .unbind('mouseleave')
                }
            }
        }
    };

    exports('mMenu', mMenu)
});